<template>
	<view class="content">
		<u-navbar :is-back="false" title-color="#ffffff" :background="background" :border-bottom="false">
			<view class="slot-wrap">
				<view class="slot-wrapName" @click="back">
					<u-icon name="arrow-left" color="#ffffff" size="40"></u-icon>
					我的曝光
				</view>
			</view>
		</u-navbar>
		<view class="cont">
			<scroll-view scroll-y="true" :style="{ height: swiperHeight }">
				<view class="box">
					<view class="boxLi" v-for="(item,index) in orders" :key="index"
						@click="toUrl('/pages/index/xq?id='+item.id)">
						<view class="boxTop" style="justify-content: space-between;">
							<view style="display: flex;align-items: center;">
								<image :src="item.user.head" mode=""></image>
								<view class="boxCont">
									<view class="boxName">
										{{item.user.nickName}}
									</view>
									<view class="boxTime">
										{{item.createTime}}
									</view>
								</view>
							</view>
							<view class="">
								<view v-if="item.status === 0">待分配</view>
								<view v-else-if="item.status === 1">已指派人员处理</view>
								<view v-else-if="item.status === 2">问题确认处理中</view>
								<view v-else-if="item.status === 3" style="color: green;">已处理</view>
								<view v-else-if="item.status === 4" style="color: green;">完成</view>
								<view v-else-if="item.status === -1" style="color: red;">用户取消</view>
							</view>
						</view>
						<view class="boxText">
							{{item.msgDetail}}
						</view>
						<view class="boxImage">
							<view class="boxImageLi" @click.stop="yulan(item1,item.signUrl)" v-for="(item1, index1) in item.signUrl"
								:key="index1">
								<image :src="item1" mode="aspectFill"></image>
							</view>
							<view class="boxImageLi" v-for="(item2, index2) in item.videoUrl"
								:key="index2">
								<video :src="item2" @click.stop></video>
								<!-- <video :src="item2"></video> -->
							</view>
						<!-- 	<template>
								<view class="boxImageLi" v-for="(item1, index1) in item.signUrl.split(',')"
									:key="index1">
									<image :src="item1" mode="aspectFill"></image>
								</view>
							</template> -->
						</view>
						<view class="wx-voice-container" :class="{ 'playing': isPlaying }" @click.stop="togglePlay(item.voiceUrl)" v-if="item.voiceUrl">
						      <view class="wx-voice-icon">
						        <view class="wx-voice-circle"></view>
						        <view class="wx-voice-bar"></view>
						        <view class="wx-voice-bar"></view>
						        <view class="wx-voice-bar"></view>
						      </view>
						    </view>
						<view class="boxAddress">
							<u-icon name="map-fill" color="#999999" size="28"></u-icon>
							{{item.address}}
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	const innerAudioContext = uni.createInnerAudioContext();
	export default {
		data() {
			return {
			
				orders: [],
				background: {
					backgroundColor: '#AED4FF',
				},
				swiperHeight: "",
				isPlaying:false
			}
		},
		onShow() {
			this.initData()
		},
		created() {
			//音频监控
			innerAudioContext.onEnded(res => {
				console.log('语音自然播放结束');
				this.isPlaying = false
			});
		},
		mounted() {
			let that = this;
			uni.getSystemInfo({
				success: resu => {
					// resu 可以获取当前屏幕的高度
					const query = uni.createSelectorQuery();
					query.select('.cont').boundingClientRect(); //.swiper是swiper类名，获取当前swiper距离顶部的位置
					query.exec(res => {
						that.swiperHeight = resu.windowHeight - res[0].top - 10 +
							'px'; //屏幕的高度减去当前swiper距离顶部的高度就是剩余屏幕的高度 然后动态赋值给swiper
						console.log('页面的剩余高度', that.swiperHeight);
					});
				},
				fail: res => {}
			});
		},

		methods: {
			// 预览图片
			yulan(item,arr) {
				uni.previewImage({
					current: item, // 当前显示图片的 http 链接
					urls: arr // 需要预览的图片 http 链接列表
				});
			},
			 togglePlay(val) {
			      this.isPlaying = !this.isPlaying;
			      if(this.isPlaying){
					  innerAudioContext.src = val;
					  innerAudioContext.play();
				  }else{
					  innerAudioContext.pause();
				  }
			      // 在这里触发播放音频的逻辑
			      // 可以通过调用音频 API 来实现音频的播放和暂停
			    },
			initData() {
				this.$ajax.get({
					url: 'api/listUserOrderByUid',
					data: {},
				}).then((res) => {
					if (res.code == 0) {
						for(var a=0;a<res.result.length;a++){
							if(res.result[a].signUrl){
								res.result[a].signUrl = res.result[a].signUrl.split(",")
							}
							if(res.result[a].videoUrl){
								console.log(res.result[a].videoUrl)
								res.result[a].videoUrl = res.result[a].videoUrl.split(",")
								console.log(res.result[a].videoUrl,123123)
							}
						}
						this.orders = res.result
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						})
					}
				});
			},
			back() {
				uni.navigateBack()
			},
			toUrl(urlSrc) {
				uni.navigateTo({
					url: urlSrc
				})
			},
			swuiper(e) {
				console.log(e)
				this.contNum = e.detail.current
			}

		}
	}
</script>

<style lang="scss">
	.cont {
		.box {
			padding: 0 30rpx;
			box-sizing: border-box;

			.boxLi {
				padding: 30rpx 0;
				box-sizing: border-box;
				border-bottom: 1px solid #dedede;

				.boxTop {
					display: flex;
					align-items: center;

					image {
						width: 70rpx;
						height: 70rpx;
						border-radius: 50%;
					}

					.boxCont {
						margin-left: 30rpx;

						.boxName {
							font-size: 30rpx;
							color: #45688E;
							font-weight: bold;
						}

						.boxTime {
							font-size: 26rpx;
							color: #999999;
						}
					}
				}

				.boxText {
					margin-top: 20rpx;
					font-size: 30rpx;
				}

				.boxImage {
					display: flex;
					align-items: center;
					justify-content: space-between;
					flex-wrap: wrap;
					margin-top: 30rpx;

					.boxImageLi {
						width: 200rpx;
						height: 200rpx;

						image {
							width: 100%;
							height: 100%;
						}
						video{
							width: 200rpx;
							height: 200rpx;
						}
					}
				}
				.boxImage::after{
					content:'';
					width: 200rpx;
				}

				.boxAddress {
					margin-top: 20rpx;
					color: #999999;
					font-size: 28rpx;
				}
			}
		}
	}


	.slot-wrap {
		margin-left: 30rpx;
		font-size: 30rpx;
		color: #ffffff;
		font-weight: bold;
		display: flex;
		align-items: center;

		.slot-wrapName {
			display: flex;
			align-items: center;
			// max-width: 240rpx;
			// white-space: nowrap;
			// /* 禁止换行 */
			// overflow: hidden;
			// /* 隐藏溢出内容 */
			// text-overflow: ellipsis;
			// /* 使用省略号表示溢出内容 */
		}
	}

	.dotBox {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 40rpx;

		.dotLi {
			width: 30rpx;
			height: 30rpx;
			border-radius: 50%;
			background: #E7E7E7;
			margin-left: 20rpx;
		}

		.dotLiA {
			width: 70rpx;
			border-radius: 20rpx;
		}

		.dotLi:first-child {
			margin-left: 0rpx;
		}
	}
	.wx-voice-container {
	  display: flex;
	  align-items: center;
	  background-color: #f5f5f5;
	  padding: 8px;
	  border-radius: 20px;
	  cursor: pointer;
	  transition: background-color 0.3s;
	  margin-top: 20rpx;
	}
	
	.wx-voice-container .playing {
	  background-color: #e6e6e6;
	}
	
	.wx-voice-icon {
	  display: flex;
	  align-items: center;
	  position: relative;
	}
	
	.wx-voice-circle {
	  width: 6px;
	  height: 6px;
	  background-color: #333;
	  border-radius: 50%;
	  margin-right: 6px;
	}
	
	.wx-voice-bar {
	  width: 4px;
	  height: 14px;
	  background-color: #333;
	  margin-right: 2px;
	  
	}
	.playing .wx-voice-bar{
		animation: voice-bar-animation 1s infinite;
	}
	.wx-voice-bar:last-child {
	  margin-right: 0;
	}
	
	.wx-voice-duration {
	  font-size: 14px;
	  color: #333;
	  padding-left: 8px;
	}
	
	@keyframes voice-bar-animation {
	  0% {
	    height: 14px;
	  }
	  50% {
	    height: 6px;
	  }
	  100% {
	    height: 14px;
	  }
	}
</style>